<template>
    <a-config-provider
        :theme="{
            token: {
                fontSize: 14,
            },
        }">
        <div class="statement-table">
            <template
                v-for="(colItem, index) in columnItems"
                :key="colItem">
                <h1 v-if="item?.length">{{ item[index].title }}</h1>
                <a-table
                    v-if="item?.length"
                    :columns="colItem"
                    :data-source="item[index].itemList"
                    bordered
                    style="margin-top: 4px"
                    :pagination="false"
                    row-key="code"
                    size="small"
                    :scroll="{ y: '30%' }"
                    :expandIcon="() => ''"
                    :defaultExpandAllRows="true"
                    :row-class-name="(_record, index) => _record.bgColor">
                    <template #bodyCell="{ column, record }">
                        <template v-if="'diffValue' === column.key">
                            <span :class="`${record.diffValue && record.diffValue != 0 ? 'error' : ''}`">
                                {{ record.diffValue }}
                            </span>
                        </template>
                        <template v-if="'diffRate' === column.key">
                            <span :class="`${record.diffValue && record.diffValue != 0 ? 'error' : ''}`">
                                {{ record.diffRate }}
                            </span>
                        </template>
                    </template>
                </a-table>
            </template>
        </div>
    </a-config-provider>
</template>

<script setup>
import { Table as ATable, ConfigProvider as AConfigProvider } from 'ant-design-vue'
defineOptions({
    name: 'DetailItem',
})
const { columnItems, item } = defineProps({ columnItems: {}, item: {} })
const customRender = (text) => {
    return `${text.replace(/（损失以“—”号记）|（本年贷方累计发生额）|其中：|（本年累计发生额）|\s+/g, '')}${
        text?.includes('工人') ? '/人' : '/千元'
    }`
}
</script>

<style lang="less" scoped>
@marginNormal: 24px;
@paddingNormal: 24px;
@radiusNormal: 8px;
@title1: 20px;
@title2: 18px;
@title3: 16px;
@content: 16px;
@smallContent: 12px;
@errorColor: #f50;
@warnColor: #ffca00;
@infoColor: #19a589;
@smallcolor: #00000045;
.statement-table {
    h1 {
        margin-top: 12px;
    }
    & > h1:nth-child(1) {
        margin-top: 0 !important;
    }
}
.statement-table :deep(.ant-table) {
    .ant-table-cell {
        font-size: 13px !important;
        padding: 3px 8px !important;
    }
    .ant-table-cell:has(.error) {
        background-color: red !important;
    }
}

.detail-card {
    border-radius: 8px;
    position: sticky;
    .big-title {
        padding: @paddingNormal;
        font-size: @title1;
        font-weight: 800;
    }
    .big-body {
        padding: @paddingNormal;
    }

    &-title {
        background-color: white;
        padding: 6px 12px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border: 1px solid #f0f0f0;
    }
    &-body {
        background-color: white;
        padding: 6px 12px;
        border: 1px solid #f0f0f0;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .divd {
        display: flex;
        clear: both;
        margin: @paddingNormal 0;
        width: 100%;
        min-width: 100%;
        color: rgba(0, 0, 0, 0.88);
        border-block-start: 1px solid rgba(5, 5, 5, 0.06);
    }
}
.all {
    &-item {
        overflow: hidden;
        position: relative;
        padding: @paddingNormal;
        flex: 1 1 auto;
        border-radius: @radiusNormal;
        background-color: white;
        border: 1px solid #f0f0f0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        gap: 8px;
        // aspect-ratio: 1.5 / 1;
        &-desc {
            display: flex;
            flex-flow: row nowrap;
            justify-content: start;
        }
        // &-desc:nth-last-child(2) {
        //     margin-top: 12px;
        //     margin-bottom: 6px;
        // }
        .icon {
            color: #00000015;
            position: absolute;
            font-size: 100px;
            bottom: -20px;
            right: -20px;
        }
    }
    &-title {
        font-size: @smallContent;
        font-weight: 700;
        color: @smallcolor;
    }
    &-value {
        font-size: 28px;
        font-weight: 700;
        line-height: 28px;
        & > span {
            padding-left: 3px;
            display: flex;
            flex-flow: column;
            justify-content: end;
            font-size: @smallContent;

            color: @smallcolor;
        }
    }
    &-prop {
        font-weight: 700;
        font-size: @smallContent;
        border-radius: 12px;
        line-height: @smallContent;
        & > span {
            padding-left: 3px;
        }
    }
}
.report {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: @marginNormal;
    .col-14 {
        width: calc(60% - @marginNormal / 2);
    }
    .col-10 {
        width: calc(40% - @marginNormal / 2);
    }
    &-card {
        flex: 0 0 auto;
        width: 100%;
        background-color: white;
        border-radius: 8px;
        border: 1px solid #f0f0f0;

        &-title {
            border-bottom: 1px solid #f0f0f0;
            padding: @paddingNormal;
        }
        &-body {
            padding: @paddingNormal;
            min-height: 100px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-evenly;
            gap: @paddingNormal;
        }
        .divd {
            display: flex;
            clear: both;
            margin: @marginNormal 0;
            width: 100%;
            min-width: 100%;
            color: rgba(0, 0, 0, 0.88);
            border-block-start: 1px solid rgba(5, 5, 5, 0.06);
        }
        .data-report {
            width: 100%;
            height: 6px;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            &-item {
                flex: 0 0 auto;
            }
            &-des {
                font-size: 12px;
                margin-top: @marginNormal;
                height: 16px;
                display: flex;
                line-height: 16px;
                flex-flow: row nowrap;
                gap: @marginNormal;
                // vertical-align: middle;
                justify-content: start;
            }
            &-point {
                box-sizing: border-box;
                margin: 5px;
                width: 6px;
                height: 6px;
                border-radius: 5px;
            }
            &-type {
                display: flex;
                line-height: 16px;
                flex-flow: row nowrap;
            }
        }
    }
}
</style>
